<template>
  <div>
    <el-card>
      <!-- 搜索/列表 -->
      <el-row>
        <el-form :inline="true" :model="form" label-width="80px">
          <el-form-item label="订单编号">
            <el-input v-model.trim="form.oid" type="text" size="small" clearable placeholder="请输入商品名称"
              @keyup.enter.native="handleSearch()"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" class="el-icon-search" @click="handleSearch()">搜索</el-button>
            <el-button size="small" class="el-icon-delete" @click="handleReset()">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="dataList">
          <el-table-column label="序号" type="index" align="center"></el-table-column>
          <el-table-column label="订单编号" prop="oid" align="center"></el-table-column>
          <el-table-column label="订单地址" prop="recvAddress" align="center"></el-table-column>
          <el-table-column label="商品总价" prop="totalPrice" align="center"></el-table-column>
          <el-table-column label="订单时间" prop="orderTime" align="center"></el-table-column>
          <el-table-column label="订单状态" prop="status" align="center">
            <!-- <span>{{ form.status == '0' ? '未支付' : '已支付' }}</span> -->
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handlEdit(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="handlDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange" :current-page="form.page" :page-size="form.pageSize"
          layout="total, prev, pager, next, jumper" :total="total" align="right">
        </el-pagination>
      </el-row>
      <!-- 新增/编辑 -->
      <el-dialog :title="title" :visible.sync="dialogVisible" width="25%">
        <el-form>
          <el-form-item label="订单状态">
            <el-select v-model="editFrom.status">
              <el-option v-for="(item, index) in itemsList" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogVisible = false">取 消</el-button>
          <el-button size="small" type="primary" @click="handleConfirm">确 定</el-button>
        </span>

      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getGoodsList, updateOrderStatus } from '@/api/goods/index'
export default {
  name: 'OrderManage',
  data () {
    return {
      form: {
        oid: '',
        page: 1,
        pageSize: 10
      },
      total: 0,
      dataList: [],
      title: '修改订单',
      dialogVisible: false,
      editFrom: {
        status: '',
        oid: ''
      },
      itemsList: [
        {
          label: '待支付',
          value: '待支付'
        },
        {
          label: '已完成',
          value: '已完成'
        }
      ]
    }
  },
  methods: {
    // 获取订单列表
    async getList () {
      const { data: res } = await getGoodsList(this.form)
      if (res.state === 200) {
        this.total = res.data.total
        this.dataList = res.data.items
      }
    },
    // 搜索
    handleSearch () {
      this.getList()
    },
    // 重置
    handleReset () {
      this.form = {
        recvAddress: '',
        oid: '',
        page: 1,
        pageSize: 10
      }
      this.getList()
    },
    // 处理切换页码
    handleCurrentChange () { },
    // 新增/编辑确定
    async handleConfirm () {
      this.dialogVisible = false
      await updateOrderStatus(this.editFrom)
      this.getList()
      this.$message.success('修改成功')
    },
    // 点击编辑
    handlEdit (currentValue) {
      console.log(currentValue)
      this.dialogVisible = true
      this.editFrom.status = currentValue.status
      this.editFrom.oid = currentValue.oid
    },
    // 删除
    handlDel (currentValue) { }
  },
  created () {
    this.getList()
  }
}
</script>

<style lang="less" scoped></style>
